<!DOCTYPE html style="font-size:1px;">
	<head>
		<meta charset="utf-8">
		<title>使用rem布局</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			html {
				height: 100%;
				overflow: hidden;
			}
			body {
				height: 100%;
			}

			.consult {
				position: fixed;
				top: 10px;
				left: 10px;
			}

			.big-content {
				margin: 0 auto;
				display: grid;
				grid-template-areas: 
					'header'
					'content';
				grid-template-rows: 80rem auto;
				grid-gap: 15rem;
			}
			.big-content .header {
				grid-area: header;
				background: rgba(0, 255, 0, 0.1);
			}
			.big-content .content {
				grid-area: content;
				display: grid;
				grid-template-areas:
					'left1 center1 center1 right1'
					'left2 center1 center1 right2'
					'left3 center2 center3 right3';
				grid-template-rows: auto;
				grid-template-columns: auto;
				grid-gap: 15rem;
				padding: 0 15rem;
			}

			.big-content .content > div {
				background: rgba(0, 255, 0, 0.1);
			}

			.big-content .content .left1 {
				grid-area: left1;
			}
			.big-content .content .left2 {
				grid-area: left2;
			}
			.big-content .content .left3 {
				grid-area: left3;
			}
			.big-content .content .center1 {
				grid-area: center1;
			}
			.big-content .content .center2 {
				grid-area: center2;
			}
			.big-content .content .center3 {
				grid-area: center3;
			}
			.big-content .content .right1 {
				grid-area: right1;
			}
			.big-content .content .right2 {
				grid-area: right2;
			}
			.big-content .content .right3 {
				grid-area: right3;
			}


		</style>
	</head>
	<body>
		<a class="consult" href="https://www.baidu.com/link?url=sQJdhzmgV3f9hmAL6Xi6Vc-VCtm1EqbCWhDAcBTi79QiI2SWbVxo34uozgqZu-Dh6lz5jfj5yaDQ1c0JXMZrXlIgR8FFWf-NcVhTWX_aRPq&wd=&eqid=c4e9a5e60001eb810000000664191a1b" target="_blank">参考地址</a>

		<div class="big-content">
			<div class="header"></div>
			<div class="content">
				<div class="left1"></div>
				<div class="left2"></div>
				<div class="left3"></div>
				<div class="center1"></div>
				<div class="center2"></div>
				<div class="center3"></div>
				<div class="right1"></div>
				<div class="right2"></div>
				<div class="right3"></div>
			</div>
		</div>

		<script>
			setRem();
			window.addEventListener('resize', resize);


			var timer = null;
			function resize() {
				clearTimeout(timer);
				timer = setTimeout(() => {
					setRem();
				}, 30);
			}
			function setRem() {
				//设计稿的宽高 一般都是16/9
				const DW = 1920, DH = 1080;
				// 需要设置html，body高度100否则获取宽度会比实际宽度小
				const clientWidth = document.documentElement.clientWidth;
			  const clientHeight = document.documentElement.clientHeight;
			  const pageWidth = clientWidth / clientHeight > DW / DH ? clientHeight * (DW / DH) : clientWidth;
			  const pageHeight = pageWidth / (DW / DH);
			  document.documentElement.style.fontSize =  1 * (pageWidth / DW) + 'px';
			 
			 	const root = document.querySelector('.big-content');
			  root.style.width = pageWidth + 'px';
			  root.style.height = pageHeight + 'px';
			}
		</script>
	</body>
</html>